<template>
  <div class="home">
    <!-- 侧边栏开始 -->
    <sidebar></sidebar>
    <!-- 侧边栏结束 -->
    <!-- <el-table v-loading.fullscreen.lock="fullscreenLoading"> -->
    <div class="box">
      <!-- 头部 -->
      <topnav></topnav>

      <!-- 商品下拉列表 -->
      <div class="nav_frm">
        <!-- 所有频道 -->
        <div class="frm_all">
          <p>
            所有频道<span class="iconfont icon-xialajiantouxiao"
              ><span class="lines"></span
            ></span>
          </p>
          <div class="frm_all_box">
            <router-link to="/allchannels" class="frm_all_list">
              <p>企业团购</p>
            </router-link>
            <router-link to="/cookbook" class="frm_all_list">
              <p>今日菜谱推荐</p>
            </router-link>
          </div>
        </div>
        <!-- 商品右侧列表 -->
        <div class="frm_title">
          <ul class="frm_title_ul clearfix">
            <router-link
              tag="li"
              :to="'/bannerpage?id=' + item.banId"
              v-for="item in homeBanner"
              :key="item.banId"
            >
              {{ item.banTitle }}</router-link
            >
          </ul>
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="banner" style="z-index: 0">
        <div class="banner_img">
          <router-link
            :to="'/bannerpage?id=' + item.banId"
            class="banner_box"
            v-for="item in homeBanner"
            :key="item.banId"
          >
            <img
              @mouseover="changeInterval(true)"
              @mouseleave="changeInterval(false)"
              v-show="item.banId === currentIndex"
              :src="item.banImg"
            />
          </router-link>
        </div>
        <div class="banner-title">
          <ul>
            <li
              @click="changeImg(item.banId)"
              v-for="item in homeBanner"
              :key="item.banId"
              :class="item.banId === currentIndex ? 'active' : ''"
            >
              {{ item.banTitle }}
            </li>
          </ul>
        </div>
      </div>
      <!-- 轮播图导航栏 -->

      <!-- 内容 -->
      <main :v-loading="true">
        <div class="container">
          <div class="main-frm">
            <p class="h-title">
              <a
                href="http://www.962360.com/Home/Category/index/fClass/296.html"
              >
                <span>爆款推荐</span> </a
              >时令优选 新鲜美味
            </p>
            <div class="swiper">
              <div class="swiper-wrapper">
                <router-link
                  :to="'/detailpage?id=' + item.homeId"
                  class="swiper-slide"
                  v-for="item in homeMain"
                  :key="item.homeId"
                >
                  <img :src="item.bigImg" />
                  <p class="ban-title">
                    {{ item.description }}
                  </p>
                  <p class="ban-price">
                    <span>
                      ￥<b>{{ item.BigImgprice }}</b>
                    </span>
                  </p>
                </router-link>
              </div>
              <i class="left-btn"></i>
              <i class="right-btn"></i>
            </div>
            <!-- </div> -->
          </div>
          <!-- 商标 -->
          <div class="trademark">
            <ul class="trademark_ul">
              <li>
                <img src="../assets/img/10111.jpg" />
              </li>
              <li>
                <img src="../assets/img/10112.jpg" />
              </li>
              <li>
                <img src="../assets/img/10113.jpg" />
              </li>
              <li>
                <img src="../assets/img/10114.jpg" />
              </li>
              <li>
                <img src="../assets/img/10111.jpg" />
              </li>
              <li>
                <img src="../assets/img/10111.jpg" />
              </li>
            </ul>
          </div>
          <!-- 光明食品 -->
          <div
            class="main-frm clearfix"
            v-for="item in homeMain"
            :key="item.homeId"
          >
            <div class="shelf_frm">
              <p class="h-title">
                <a
                  href="http://www.962360.com/Home/Category/index/fClass/296.html"
                >
                  <span>{{ item.homeTitle }}</span> </a
                >{{ item.subheading }}
              </p>
            </div>
            <!-- 左侧轮播图 -->
            <el-carousel height="575px" direction="vertical" :autoplay="true">
              <el-carousel-item
                v-for="(bannerTwos, index) in item.bannerTwo"
                :key="index"
              >
                <a class="imgs">
                  <img :src="bannerTwos.slideposter" />
                </a>
                <div class="price">
                  <del v-if="bannerTwos.preferential"
                    >￥{{ bannerTwos.preferential }}</del
                  >
                  <span
                    >￥<b>{{ bannerTwos.priceTwo }}</b></span
                  >
                </div>
              </el-carousel-item>
            </el-carousel>
            <div class="center-box">
              <router-link :to="'/detailpage?id=' + item.homeId">
                <img :src="item.bigImg" />
              </router-link>
              <div class="explain">
                <h2>
                  {{ item.description }} ><small>{{ item.weight }}</small>
                </h2>
                <p class="explain_p">
                  ￥<span>{{ item.BigImgprice }}</span>
                </p>
              </div>
            </div>
            <!-- 折叠面板 -->
            <el-collapse accordion v-model="activeName">
              <div v-for="(best, index) in lightMain"
                :key="index">
              <el-collapse-item :name="best.sellable">
                <template slot="title">
                  <p class="best-title">
                    {{ best.bestNum }}<b>{{ best.sellable }}</b>
                  </p>
                </template>
                <div class="best-box">
                  <router-link :to="'/detailpage?id=' + best.homeId">
                    <img
                      class="best-img"
                      :src="best.bigImg"
                      :title="best.description"
                  /></router-link>
                  <div class="best-p">
                    <p class="best-title2" :title="best.description">
                      {{ best.description }}
                    </p>
                    <p class="best-title3">
                      <del>{{ best.Special }}</del
                      ><span>
                        ￥<b>{{ best.BigImgprice }}</b>
                      </span>
                    </p>
                  </div>
                </div>
              </el-collapse-item>
              </div>
            </el-collapse>
            <!-- 下面购物车 -->
            <ul class="bottom-card">
              <li v-for="(card, index) in lightMain" :key="index">
                <div class="card clearfix">
                  <div class="card-tag" v-if="card.ShelfLife">特价</div>
                  <router-link tag="div" :to="'/detailpage?id=' + card.homeId">
                    <img :src="card.bigImg" :title="card.description"
                  /></router-link>
                  <div class="car-p">
                    <p class="best-title2">{{ card.description }}</p>
                    <p class="best-title3">
                      <!-- <del v-if="card.Special">{{ item.Special }}</del> -->
                      <del>{{ card.ShelfLife }}</del>
                      <span>
                        ￥<b>{{ card.BigImgprice }}</b>
                      </span>
                    </p>
                  </div>
                  <!-- 购买数量
                  <div class="car-num clearfix">
                    <p class="buynum clearfix">
                      <input class="form-control" type="text" value="1" />
                      <button class="btn" type="button">+</button>
                      <button class="btn" type="button">-</button>
                    </p>
                    <div class="gdaddsc"></div>
                    <div class="buy">直接购买</div>
                  </div> -->
                </div>
              </li>
            </ul>
          </div>
        </div>
      </main>
    </div>

    <!-- 页脚 -->
    <footerpage></footerpage>
  </div>
</template>

<script>
import Swiper from "swiper";
import { getContentJson, getHomeMian } from "../api/home.js";
import topnav from "../components/TopNav.vue";
import sidebar from "../components/SideBar.vue";
import footerpage from "../components/FooterPage.vue";

export default {
  data() {
    return {
      // 轮播图
      currentIndex: 1, //当前所在图片下标
      homeBanner: null,
      timer: null, //定时轮询

      // 折叠面板
      activeName: "热销Top 1",

      // 主内容
      homeMain: [],
      // 排行榜
      lightMain: [],

      // 回到顶部
      btnFlag: false,
    };
  },
  methods: {
    //swiper轮播图
    initSwiper() {
      setTimeout(() => {
        new Swiper(".swiper", {
          slidesPerView: "auto",
          autoplay: true,
          loop: true,
          loopedSlides: 5,
          observer: true, //自动初始化swiper
          observeParents: true, //自动初始化swiper
          navigation: {
            nextEl: ".left-btn",
            prevEl: ".right-btn",
          },
        });
      }, 1000);
    },

    // 轮播图
    getContentJsonFun() {
      getContentJson({ id: this.$route.query.id }).then((data) => {
        this.homeBanner = data.homeBanner;
      });
    },
    // 主内容
    getHomeMianFun() {
      getHomeMian({ id: this.$route.query.id }).then((data) => {
        // 主页大内容
        for (var i = 0; i < data.homeMain.length; i++) {
          if (i < 6) {
            this.homeMain.push(data.homeMain[i]);
          }
        }

        //光明食品
        for (var j = 6; j < data.homeMain.length; j++) {
          if (j < 11) {
            this.lightMain.push(data.homeMain[j]);
          }
        }
        console.log(this.lightMain);

        // //光明食品
        // for (var j = 6; j < data.homeMain.length; j++) {
        //   if (j < 11) {
        //     this.lightMain.push(data.homeMain[j]);
        //   }
        // }

      });
    },

    //开启定时器
    startInterval() {
      // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex > this.homeBanner.length) {
          this.currentIndex = 1;
        }
      }, 3000);
    },
    // 点击控制圆点
    changeImg(index) {
      this.currentIndex = index;
    },
    //鼠标移入移出控制
    changeInterval(val) {
      if (val) {
        clearInterval(this.timer);
      } else {
        this.startInterval();
      }
    },
  },
  created() {
    this.getContentJsonFun();

    this.getHomeMianFun();
  },
  //进入页面后启动定时轮询
  mounted() {
    this.startInterval();
    this.initSwiper();
  },

  components: {
    sidebar,
    topnav,
    footerpage,
  },
};
</script>

<style lang="scss" scoped>
.home {
  /* 轮播图 */
  .banner {
    .banner_img {
      // display: flex;
      width: 100%;
      .banner_box {
        height: 360px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    /* 控制轮播图标签 */
    .banner-title {
      width: 100%;
      min-width: 960px;
      background-color: #fff;
      ul {
        height: 40px;
        margin: 0 auto;
        text-align: center;
        line-height: 36px;
        li {
          width: 155px;
          display: inline-block;
          margin: 0 5px;
          cursor: pointer;
          font-size: 14px;
        }
      }
    }
    .active {
      border-bottom: 4px solid #7f0019;
    }
  }
  // 折叠面板
  .el-collapse {
    width: 280px;
    height: 578px;
    margin: 20px 0 20px 25px;
    background-color: #fff;
    float: left;
    border: #ddd solid;
    border-width: 1px 0;
    .el-collapse-item {
      background: #fff;
      border-bottom: #dddddd solid 1px;
      position: relative;
      overflow: hidden;
      .best-box {
        height: 423px;
        .best-img {
          width: 100%;
          height: 280px;
          cursor: pointer;
        }
        .best-p {
          position: absolute;
          bottom: 130px;
          background-color: #fff;
        }
      }
    }
  }

  /* 爆款轮播图 */
  .swiper {
    overflow: hidden;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: 10;
    position: relative;
  }
  .swiper .swiper-wrapper .swiper-slide {
    height: 302px;
    width: 260px;
    float: left;
    margin-right: 15px;
  }

  .swiper .swiper-wrapper .swiper-slide .ban-title,
  .ban-price {
    width: 234px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #605f5d;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
  }

  /* .swiper .swiper-wrapper .swiper-slide a {
    display: block;
    width: 230px;
    height: 230px;
} */

  .swiper .swiper-wrapper .swiper-slide img {
    width: 230px;
    height: 230px;
    cursor: pointer;
  }

  .swiper .swiper-wrapper .swiper-slide .ban-price {
    color: #973044;
  }
  /* 左右按钮 */
  .left-btn {
    position: absolute;
    background: url("../assets/img/10067.png");
    width: 43px;
    height: 43px;
    top: 50%;
    margin-top: -22px;
    left: 0;
    cursor: pointer;
    z-index: 10;
  }

  .right-btn {
    position: absolute;
    background: url("../assets/img/10068.png");
    width: 43px;
    height: 43px;
    top: 50%;
    margin-top: -22px;
    right: 0;
    cursor: pointer;
    z-index: 10;
  }
}
</style>